﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>登录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!--responsive-->
    <link rel="shortcut icon" href="../Content/img/jridge.ico" />
    <link rel="bookmark" href="../Content/img/jridge.ico" />
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
    <script src="../Scripts/clipboard-polyfill.js"></script>
    <!--vue-->
    <script src="../Scripts/vue-2.5.9/vue.min.js"></script>
    <!--axios-->
    <script src="../Scripts/vue-2.5.9/axios.min.js"></script>
    <!--elementUI-->
    <script src="../Scripts/elementUI-2.2.2/index.js"></script>
    <link rel="stylesheet" href="../Scripts/elementUI-2.2.2/theme-chalk/index.css">
    <!--custom-->
    <link rel="stylesheet" href="../Content/vue-common.css">
    <script src="../Scripts/service/vue-service.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            background-image: url(../images/drsBG.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            font-family: '微软雅黑 Light', cursive;
        }

        #app {
            height: 100%;
        }

        form {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40%;
            max-width: 300px;
            min-width: 200px;
            text-align: center;
            padding: 15px 30px;
            border-radius: 10px;
            background: #fff;
        }

        .title {
            margin-bottom: 10px;
            font-size: 32px;
        }

        .checkbox .el-form-item__content {
            line-height: 30px;
            text-align: left;
        }
    </style>
</head>

<body onkeydown="body_keydown(event)">
    <div id="app">
        <el-form :model="form" id="loginform" name="loginform">
            <div class="title">
                <span>MES认知系统</span>
            </div>
            <el-form-item>
                <el-input v-model="form.user" size="medium" placeholder="用户名/工号" name="login_username"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input type="password" v-model="form.password" size="medium" placeholder="密码" name="login_password"></el-input>
            </el-form-item>
            <el-form-item class="checkbox">
                <el-checkbox v-model="checked">记住密码</el-checkbox>
            </el-form-item>

            <el-form-item style="margin:15px 0">
                <el-row :span="24">
                    <el-col :span="12">
                        <el-button type="primary" @click="scanDialog = true" size="medium">刷卡</el-button>
                    </el-col>
                    <el-col :span="12">
                        <el-button type="primary" @click="login" size="medium">登录</el-button>
                    </el-col>
                </el-row>

            </el-form-item>
        </el-form>
        <el-dialog :visible.sync="scanDialog" title="刷卡登录">
            <h1 style="text-align:center">请刷卡</h1>
            <span slot="footer" class="dialog-footer">
                <el-button @click="scanDialog = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    common_fn: null,
                    form: {
                        user: '',
                        password: ''
                    },
                    checked: false,
                    scanDialog: false,
                    cardno: '',
                    cardnoClone: ''
                }
            },
            methods: {
                login: function () {
                    var self = this;
                    if (self.form.user == '') {
                        notify('请输入用户名', 'error'); return
                    }
                    if (self.checked) {
                        setcookie("username", self.form.user, 365);
                        setcookie("password", self.form.password, 365);
                    }
                    var param = $('#loginform').serialize();
                    self.common_fn.XHR_post('../api2/meslogin', param, function (response) {
                        var url = getQueryString("redirect");
                        if (url == null || url.length == 0) {
                            url = "./addorder.html";
                        }
                        if (response.resFlag != 0)
                            notify(response.errMsg, 'error');
                        else {
                            window.location.href = url;
                        }
                    })
                },
                scan: function () {
                    var self = this;
                    self.cardnoClone = self.cardno;
                    self.cardno = '';
                    var url = '../api2/mesloginbycardno?cardno=' + self.cardnoClone;
                    self.common_fn.XHR_post(url, null, function (response) {
                        var url = getQueryString("redirect");
                        if (url == null || url.length == 0) {
                            url = "./addorder.html";
                        }
                        if (response.resFlag != 0)
                            notify(response.errMsg, 'error');
                        else {
                            window.location.href = url;
                        }
                    })
                }
            },
            mounted: function () {
                var self = this;
                self.form.user = getcookie("username");
                self.form.password = getcookie("password");
                self.common_fn = new common_fn();
                self.common_fn.init(function () { })
                window.body_keydown = function (e) {
                    var keycode = window.event ? e.keyCode : e.which;
                    if (keycode == 13 && !self.scanDialog) {
                        self.login();
                    }
                    if (keycode == 13 && self.scanDialog) {
                        self.scan();
                    }
                }
                $(document).keypress(function (e) {
                    var keycode = window.event ? e.keyCode : e.which;
                    if (keycode !== 13 && self.scanDialog) {
                        if (48 <= keycode && keycode <= 57 || 65 <= keycode && keycode <= 90) {
                            self.cardno += (keycode - 48);
                        }
                    }
                });
            }
        })
    </script>
</body>

</html>